<template>
	<el-card class="box-card">
		<div slot="header" class="clearfix">
			<span>管理员管理</span>
			<el-button style="float: right; padding: 0" type="text">
				<el-button size="mini" type="primary" class="el-icon-plus" @click="addUserBtnFn">
					添加
				</el-button>
			</el-button>
		</div>
		<!-- 表格 -->
		<div>
			<el-table
				:data="tableData"
				style="width: 100%"
				border
				:key="certinfoKey"
				:max-height="$store.state.tableHeight"
			>
				<el-table-column prop="id" label="ID" width="150" type="index"></el-table-column>
				<el-table-column prop="id" label="ID" width="150"></el-table-column>
				<el-table-column prop="username" label="账号" width="260"></el-table-column>
				<el-table-column prop="password" label="密码" width="260">
					<template slot-scope="scope">
						<el-button class="view" type="text" @click.native.prevent="view(scope.$index)">
							<i class="el-icon-view"></i>
						</el-button>
						{{ scope.row.password_d }}
					</template>
				</el-table-column>
				<el-table-column
					prop="limit"
					label="权限"
					width="260"
					:filters="[{ text: '超级管理员', value: 0 }, { text: '管理员', value: 1 }]"
					:filter-method="filterLimit"
				>
					<template v-slot="scope">
						<el-tag v-if="scope.row.status == 0">超级管理员</el-tag>
						<el-tag v-else type="success">管理员</el-tag>
					</template>
				</el-table-column>

				<el-table-column label="操作">
					<template v-slot="scope">
						<el-button
							type="primary"
							icon="el-icon-edit"
							size="medium"
							@click="updateUserBtnFn(scope.row)"
							:disabled="scope.row.id === 3"
						></el-button>
						<el-popconfirm
							confirm-button-text="好的"
							cancel-button-text="不用了"
							icon="el-icon-info"
							icon-color="red"
							title="这是一段内容确定删除吗？"
							@confirm="delUserBtnFn(scope.row.id)"
						>
							<el-button
								type="danger"
								icon="el-icon-delete"
								size="medium"
								slot="reference"
								:disabled="scope.row.id === 3"
							></el-button>
						</el-popconfirm>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!-- 弹出层 -->
		<el-dialog
			:title="isEdit ? '编辑账户' : '添加账户'"
			:visible.sync="dialogVisible"
			width="30%"
			:before-close="handleClose"
			@closed="onAddCloseFn"
		>
			<div>
				<el-form
					:model="superUserForm"
					ref="userFormRef"
					label-width="100px"
					:rules="rules"
					class="demo-ruleForm"
				>
					<el-form-item label="账号" prop="username" label-width="60px">
						<el-input v-model="superUserForm.username"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password" label-width="60px">
						<el-input v-model="superUserForm.password"></el-input>
					</el-form-item>
					<el-form-item label="权限" label-width="60px">
						<el-select v-model="superUserForm.status" placeholder="请选择权限">
							<el-option label="超级管理员" :value="0"></el-option>
							<el-option label="管理员" :value="1"></el-option>
						</el-select>
						<span class="tip">*默认超级管理员</span>
					</el-form-item>
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="confirmFn">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 分页 -->
		<div class="page">
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="pagenum"
				:page-sizes="[4, 6, 10, 15]"
				:page-size="pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="total"
			></el-pagination>
		</div>
	</el-card>
</template>

<script>
import { getSupUserListAPI, uptSupUserAPI, delSupUserAPI, addSupUserAPI } from '@/api';
export default {
	name: 'superUser',
	data() {
		return {
			// tableHeight: window.innerHeight - 275, //表格动态高度
			// 分页
			total: 0,
			pagenum: 1,
			pagesize: 6,
			// 显示隐藏 table 重新渲染
			certinfoKey: false,
			dialogVisible: false,
			isEdit: false, //ture 编辑 false 新增
			editId: '', //编辑id
			tableData: [],
			superUserForm: {
				username: '',
				password: '',
				status: 0
			},
			rules: {
				username: [
					{
						required: true,
						message: '请输入名称',
						trigger: 'blur'
					},
					{
						min: 5,
						max: 10,
						message: '长度在 5 到 10 个字符',
						trigger: 'blur'
					}
				],
				password: [
					{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					},
					{
						min: 6,
						max: 10,
						message: '长度在 6 到 10 个字符',
						trigger: 'blur'
					}
				]
			}
		};
	},
	methods: {
		// 分页
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.pagesize = val;
			this.getListFn();
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			this.pagenum = val;
			this.getListFn();
		},
		// 获取管理员列表
		getListFn() {
			getSupUserListAPI(this.pagenum, this.pagesize).then(res => {
				console.log(res);
				if (res.status === 200) {
					this.tableData = res.data.data;
					this.total = res.data.total;
					this.tableData.forEach(item => {
						item.password_d = '******';
					});
				}
			});
		},
		// 编辑 窗口
		updateUserBtnFn(obj) {
			// console.log(obj);
			this.dialogVisible = true;
			this.isEdit = true;
			this.editId = obj.id;
			this.$nextTick(() => {
				//   数据回显  在打开修改对话框的时候 里面有数据
				this.superUserForm.username = obj.username;
				this.superUserForm.password = obj.password;
				this.superUserForm.status = obj.status;
			});
		},
		// 添加 窗口
		addUserBtnFn() {
			this.dialogVisible = true;
			this.isEdit = false;
			this.editId = '';
		},
		// 编辑 添加 账户
		confirmFn() {
			this.$refs.userFormRef.validate(async valid => {
				if (valid) {
					if (this.isEdit) {
						console.log(this.superUserForm);
						uptSupUserAPI({
							...this.superUserForm,
							id: this.editId
						}).then(res => {
							// console.log(res);
							if (res.status === 200) {
								this.$message.success('更新管理员成功');
							} else {
								this.$message.error('更新管理员失败');
							}
							this.getListFn();
						});

						// const res = await uptSupUserAPI({ ...this.superUserForm, id: this.editId });
						// console.log(res);
					} else {
						console.log(this.superUserForm);
						// 请求添加接口api
						// this.$axios({
						//   method: "POST",
						//   url: "http://localhost:3000/superuser",
						//   data: this.superUserForm,
						// });

						// addSupUserAPI(this.superUserForm).then((res) => {
						//   console.log(res);
						// });
						const res = await addSupUserAPI(this.superUserForm);
						if (res.status === 200) {
							this.$message.success('添加管理员成功');
						} else {
							this.$message.error('添加管理员失败');
						}
						// console.log(res);
						this.getListFn();
					}

					this.dialogVisible = false;
				} else {
					return false;
				}
			});
		},
		// 删除用户
		delUserBtnFn(id) {
			delSupUserAPI(id).then(res => {
				console.log(res);
				if (res.status === 200) {
					this.$message.success('删除管理员成功');
				} else {
					this.$message.error('删除管理员失败');
				}
			});
			this.getListFn();
		},
		// 编辑弹出层
		handleClose(done) {
			this.$confirm('确认关闭？')
				.then(_ => {
					done();
				})
				.catch(_ => {});
		},
		// 弹窗关闭以后 重置表单
		onAddCloseFn() {
			this.$refs.userFormRef.resetFields();
		},
		// 点击查看密码
		view(index) {
			console.log(123);
			if (this.tableData[index].password_d === '******') {
				this.tableData[index].password_d = this.tableData[index].password;
			} else {
				this.tableData[index].password_d = '******';
			}
			// 显示隐藏密码 以后重新渲染表格
			this.certinfoKey = !this.certinfoKey;
		},
		// 权限筛选
		filterLimit(value, row, colum) {
			return row.status === value;
		}
	},
	mounted() {
		this.getListFn();
		// window.onresize:浏览器尺寸变化响应事件
		// window.onresize = () => {
		// 	console.log(12312);
		// 	this.tableHeight = window.innerHeight - 275;
		// };
	}
};
</script>

<style scoped>
/* 小眼睛 */
.view {
	position: absolute;
	top: 7px;
	right: 20px;
}

.tip {
	color: #f56c6c;
	font-size: 12px;
	margin-left: 10px;
}
</style>
